<template>
    <div>
        <a-modal
            v-model:visible="visible"
            :title="reimbursementType + '申请'"
            wrapClassName="generalReimbursement-handle-modal"
            width="100%"
            :footer="false"
        >
            <div class="generalReimbursement-content-box-v">
                <div style="width: 80%;margin: 8px auto 8px auto;">
                    <a-steps labelPlacement="vertical" :current="currentSteps" size="small" @change="currentStepChange">
                        <a-step title="报销信息填写" />
                        <a-step title="用款计划申请" />
                        <a-step title="汇总表单" />
                    </a-steps>
                </div>
                <div class="generalReimbursement-infoArea-box">
                    <div v-if="currentSteps == 0" style="height: calc(100vh - 195px);overflow: auto;">
                        <a-form :form="cform" ref="form" class="generalReimbursement-model-form-box" :key="formKey">
                            <a-descriptions bordered style="width: 100%;" :column="3">
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        单&nbsp;据&nbsp;号
                                    </span>
                                    <a-form-item ref="fdjh" prop="fdjh" class="zm-form-model">
                                        <span>{{ formState.fdjh }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        填报日期
                                    </span>
                                    <a-form-item ref="ftbrq" prop="ftbrq" class="zm-form-model">
                                        <span>{{ formState.ftbrq }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        科&nbsp;&nbsp;&nbsp;&nbsp;室
                                    </span>
                                    <a-form-item ref="fjbks" prop="fjbks" class="zm-form-model">
                                        <span>{{ formState.fjbks }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        填&nbsp;报&nbsp;人
                                    </span>
                                    <a-form-item ref="fjbr" prop="fjbr" class="zm-form-model">
                                        <span>{{ formState.fjbr }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        联系电话
                                    </span>
                                    <a-form-item ref="flxdh" prop="flxdh" class="zm-form-model">
                                        <span>{{ formState.flxdh }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" >*</span>
                                        申请依据
                                    </span>
                                    <a-form-item ref="fsqyj" prop="fsqyj" class="zm-form-model">
                                        <div style="width: 100%;">
                                            <a-input style="width: calc(100% - 30px);" v-model="formState.fsqyj" @click="fsqyjChange"></a-input>
                                            <a-icon v-if="formState.fsqyj" type="delete" @click="fsqyjDelete" style="color: red; font-size: 18px;margin-left: 6px;"/>
                                        </div>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item :span="3">
                                    <span slot="label" class="descriptions-label-slot">
                                        内&nbsp;&nbsp;&nbsp;&nbsp;容
                                    </span>
                                    <a-form-item ref="fbxnrms" prop="fbxnrms" class="zm-form-model">
                                        <span>{{ formState.fbxnrms?formState.fbxnrms:" " }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item :span="2">
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" >*</span>
                                        开户银行
                                    </span>
                                    <a-form-item ref="fkhyh" prop="fkhyh" class="zm-form-model">
                                        <a-input
                                            v-if="!isView"
                                            style="width: 100%"
                                            v-model="formState.fkhyh"
                                            placeholder="请输入开户银行"
                                            @blur="blurClick({fkhyh:formState.fkhyh})"
                                            >
                                        </a-input>
                                        <span v-else>{{ formState.fkhyh }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" >*</span>
                                        开户行所在地
                                    </span>
                                    <a-form-item ref="fkhyhszd" prop="fkhyhszd" class="zm-form-model">
                                        <a-input
                                            v-if="!isView"
                                            style="width: 100%"
                                            v-model="formState.fkhyhszd"
                                            placeholder="请输入开户行所在地"
                                            @blur="blurClick({fkhyhszd:formState.fkhyhszd})"
                                            >
                                        </a-input>
                                        <span v-else>{{ formState.fkhyhszd }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item :span="2">
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" >*</span>
                                        银行卡号
                                    </span>
                                    <a-form-item ref="fkhyhkh" prop="fkhyhkh" class="zm-form-model">
                                        <a-input
                                            v-if="!isView"
                                            style="width: 100%"
                                            v-model="formState.fkhyhkh"
                                            placeholder="请输入银行卡号"
                                            @blur="blurClick({fkhyhkh:formState.fkhyhkh})"
                                            >
                                        </a-input>
                                        <span v-else>{{ formState.fkhyhkh }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item>
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" >*</span>
                                        金&nbsp;&nbsp;&nbsp;&nbsp;额
                                    </span>
                                    <a-form-item ref="fybbxje" prop="fybbxje" class="zm-form-model">
                                        <a-input
                                            v-if="!isView"
                                            style="width: 100%"
                                            v-model="formState.fybbxje"
                                            placeholder="请输入金额"
                                            @blur="blurClick({fybbxje:formState.fybbxje})"
                                            >
                                        </a-input>
                                        <span v-else>{{ formState.fybbxje }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                                <a-descriptions-item :span="3">
                                    <span slot="label" class="descriptions-label-slot">
                                        <span class="xhText" >*</span>
                                        收款单位
                                    </span>
                                    <a-form-item ref="fskdw" prop="fskdw" class="zm-form-model">
                                        <a-input
                                            v-if="!isView"
                                            style="width: 100%"
                                            v-model="formState.fskdw"
                                            placeholder="请输入收款单位"
                                            @blur="blurClick({fskdw:formState.fskdw})"
                                            >
                                        </a-input>
                                        <span v-else>{{ formState.fskdw }}</span>
                                    </a-form-item>
                                </a-descriptions-item>
                            </a-descriptions>
                        </a-form>
                    </div>
                    <div v-if="currentSteps == 1" style="height: calc(100vh - 195px);overflow: auto;">
                        <div style="width: 70%;margin: 30px auto;text-align: -webkit-right;">
                            <a-button @click="indexHandleClick" class="blue-btn" style="margin: 20px 0 5px;">点击选择</a-button>
                            <table border="1" cellspacing="0" class="generalReimbursement-transportation-table" style="width: 100%" :key="tableKey">
                                <tr>
                                    <th colspan="6" style="background-color: #5ca3e5 !important;color: white !important;text-align: center;">项目预算指标</th>
                                </tr>
                                <tr>
                                    <th>预算指标名称</th>
                                    <th>科&ensp;&ensp;室</th>
                                    <th>部门经济分类</th>
                                    <!-- <th>已申请支付金额</th> -->
                                    <th>总指标</th>
                                    <th>指标结余</th>
                                    <th>支出进度</th>
                                </tr>
                                <tr v-if="currentSteps2Table.length > 0" v-for="(item,index) in currentSteps2Table" :key="index">
                                    <td>{{ item.fysxmmc }}</td>
                                    <td>{{ item.fbm }}</td>
                                    <td>{{ item.fbmjjflmc }}</td>
                                    <!-- <td>{{ item.fysqje }}</td> -->
                                    <td>{{ item.fzzb }}</td>
                                    <td>{{ item.fzbjy }}</td>
                                    <td>{{ Number(item.fzcjd * 100).toFixed(2) + '%' }}</td>
                                </tr>
                                <tr v-if="currentSteps2Table.length == 0">
                                    <td colspan="6">
                                        暂无数据
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--  -->
                        <div v-if="laborCostsBox" style="width: 100%;margin: 0 auto;margin-top: 50px;text-align: center;">
                            <h3>{{ this.formState.fbxnrms }}</h3>
                            <div style="display: flex;justify-content: space-between;padding: 0px 20px 10px;">
                                <span>科室：<span>{{ this.formState.fjbks }}</span></span>
                                <span>日期：<span>{{ this.formState.ftbrq }}</span></span>
                            </div>
                            <table border="1" cellspacing="0" style="width: 100%" class="laborCostsTable">
                                <tr>
                                    <th>姓名<span style="color: red;">(必填正确)</span></th>
                                    <th>证件类型</th>
                                    <th>身份证号<span style="color: red;">(必填正确)</span></th>
                                    <th>单位</th>
                                    <th>劳务费</th>
                                    <th>银行卡号</th>
                                    <th>开户行</th>
                                </tr>
                                <tr  v-for="(item,index) in laborCostsList" :key="index">
                                    <td>
                                        <a-input
                                            v-model="item.realname"
                                            placeholder="请输入姓名"
                                            @blur="getupdateBxrymxxx({realname:item.realname,id:item.id})"
                                        />
                                    </td>
                                    <td style="width: 320px;">
                                        <compSelector
                                            :key="compSelectorkey"
                                            v-model="item.fzjlx"
                                            :defaultValue="item.fzjlx"
                                            :compType="typeSelect"
                                            class="comp-select-box-b"
                                            style="width: 100%;"
                                            @selectHandleChange="getupdateBxrymxxx({fzjlx:item.fzjlx,id:item.id})"
                                            dictionaryType="证件类型"/>
                                    </td>
                                    <td>
                                        <a-input
                                            v-model="item.fsfzh"
                                            placeholder="请输入身份证号"
                                            @blur="getupdateBxrymxxx({fsfzh:item.fsfzh,id:item.id})"
                                        />
                                    </td>
                                    <td>
                                        <a-input
                                            v-model="item.fgzdw"
                                            placeholder="请输入单位名称"
                                            @blur="getupdateBxrymxxx({fgzdw:item.fgzdw,id:item.id})"
                                        />
                                    </td>
                                    <td>
                                        {{item.flwfsbje}}
                                    </td>
                                    <td>
                                        {{item.fyhkh}}
                                    </td>
                                    <td>
                                        {{item.fkfh}}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div v-if="currentSteps == 2" style="height: calc(100vh - 195px);overflow: auto;">
                        <div class="generalReimbursement-summary-table-5">
                            <div class="tabs-card-edit-box">
                                <a-tabs type="card" v-model:activeKey="summaryActiveKey" @change="summaryActiveChange">
                                    <a-tab-pane key="汇总表单" tab="汇总表单"></a-tab-pane>
                                    <a-tab-pane key="报销明细" tab="报销明细"></a-tab-pane>
                                    <a-tab-pane key="事项申请" tab="事项申请"></a-tab-pane>
                                </a-tabs>
                            </div>
                            <div  class="tab-box-v1" :key="allTableKey" style="height: calc(100vh - 270px);overflow:auto">
                                <div v-if="summaryActiveKey == '汇总表单'" class="generalReimbursement-summary-1">
                                    <div class="applicationForTransferForm-print-box preview-box">
                                        <div v-if="previewTableList.bxd.fbxdlx == '对公转账申请单'">
                                            <h3 style="text-align: center;font-weight: 600;font-size: 22px;">申请转账单</h3>
                                            <div v-if="isYbbxbt" style="margin-bottom: 20px;">
                                                <table class="applicationForTransferForm-table" border="1" cellspacing="0" style="width: calc(100%);border-color: #000 !important;table-layout: fixed;">
                                                    <colgroup>
                                                        <col style="width: 130px;">
                                                        <col>
                                                        <col style="width: 130px">
                                                        <col>
                                                        <col style="width: 130px">
                                                        <col>
                                                    </colgroup>
                                                    <tr>
                                                        <th>项&emsp;&emsp;目</th>
                                                        <td>{{ ybbxbtData.xmmc }}</td>
                                                        <th>经济科目</th>
                                                        <td>{{ ybbxbtData.jjkm }}</td>
                                                        <th>金&emsp;&emsp;额</th>
                                                        <td>{{ ybbxbtData.je }}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <table border="1" cellspacing="0" class="applicationForTransferForm-table">
                                                <tr>
                                                    <th style="width:130px;">收款单位</th>
                                                    <td>{{ previewTableList.bxd.fskdw }}</td>
                                                    <th rowspan="3" style="padding: 0 !important;width:80px;">付款<br/>方式</th>
                                                    <td rowspan="3" style="width: 120px;">转&nbsp;账</td>
                                                </tr>
                                                <tr>
                                                    <th style="width:130px;">账&nbsp;&nbsp;号</th>
                                                    <td>{{ previewTableList.bxd.fkhyhkh.replace(/(\d{4})(?=\d)/g, "$1 ") }}</td>
                                                </tr>
                                                <tr>
                                                    <th style="width:130px;">开户银行</th>
                                                    <td>{{ previewTableList.bxd.fkhyh }}</td>
                                                </tr>
                                                <tr>
                                                    <th style="width:130px;">金&nbsp;&nbsp;额</th>
                                                    <td>{{ previewTableList.bxd.fhjbxjedx }}</td>
                                                    <td colspan="2" style="text-align: left;">{{ '￥'+previewTableList.bxd.fybbxje }}</td>
                                                </tr>
                                                <tr>
                                                    <th style="width:130px;">用&nbsp;&nbsp;途</th>
                                                    <td colspan="3">{{ previewTableList.bxd.fbxnrms }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div v-if="previewTableList.bxd.fbxdlx == '支出报销单'">
                                            <div style="display: flex;">
                                                <div class="expenseApprovalForm-print-box">
                                                    <h1 class="letterSpan">支出报批单</h1>
                                                    <div class="expenseApprovalForm-print-title-box" style="padding: 0 40px;">
                                                        <span>
                                                            <span class="Title">申报部门：</span>{{ previewTableList.bxd.fjbks }}
                                                        </span>
                                                        <span>
                                                            <span class="Title">填报日期：</span>
                                                            {{ previewTableList.bxd.ftbrq.substr(0,4) }} <span class="Title">年</span>
                                                            {{ previewTableList.bxd.ftbrq.substr(5,2) }} <span class="Title">月</span>
                                                            {{ previewTableList.bxd.ftbrq.substr(8,2) }} <span class="Title">日</span>
                                                        </span>
                                                    </div>
                                                    <div v-if="isYbbxbt" style="margin-bottom: 20px;">
                                                        <table border="1" cellspacing="0" class="expenseApprovalForm-table">
                                                            <colgroup>
                                                                <col style="width: 130px;">
                                                                <col>
                                                                <col style="width: 130px">
                                                                <col>
                                                                <col style="width: 130px">
                                                                <col>
                                                            </colgroup>
                                                            <tr>
                                                                <th>
                                                                    <span class="Title">项&emsp;&emsp;目</span>
                                                                </th>
                                                                <td>{{ ybbxbtData.xmmc }}</td>
                                                                <th>
                                                                    <span class="Title">经济科目</span>
                                                                </th>
                                                                <td>{{ ybbxbtData.jjkm }}</td>
                                                                <th>
                                                                    <span class="Title">金&emsp;&emsp;额</span>
                                                                </th>
                                                                <td>{{ ybbxbtData.je }}</td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <table border="1" cellspacing="0" class="expenseApprovalForm-table" :key="tableKey">
                                                        <tr>
                                                        <td style="text-align: left;">
                                                            <span class="Title">用途：</span>
                                                            {{ previewTableList.bxd.fbxnrms }}
                                                        </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="text-align: left;display: flex;justify-content: space-between;border: unset;">
                                                                <span>
                                                                    <span class="Title" style="margin-right: 20px;">金额（大写）：</span>
                                                                    <!-- {{ 'x' }} <span class="Title">万</span>
                                                                    {{ '贰' }} <span class="Title">仟</span>
                                                                    {{ '柒' }} <span class="Title">佰</span>
                                                                    {{ '伍' }} <span class="Title">拾</span>
                                                                    {{ '零' }} <span class="Title">元</span>
                                                                    {{ '零' }} <span class="Title">角</span>
                                                                    {{ '零' }} <span class="Title">分</span> -->
                                                                    {{ previewTableList.bxd.fhjbxjedx }}
                                                                </span>
                                                                <span style="text-align: right;padding-right: 30px;"><span class="Title">小写￥</span>{{ previewTableList.bxd.fybbxje }}</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                        <td style="display: flex;padding: 0 !important;border: unset;border-top: 1px solid #5ca3e5;">
                                                            <div style="flex: 1;border-right: 1px solid #5ca3e5;">
                                                                <p class="Title" style="text-align: left;padding-left: 5px;">单位领导批示：</p>
                                                                <p style="min-height: 80px;">{{ previewTableList.bxd.fzxspyj }}</p>
                                                                <p style="text-align: right;padding-right: 20px;margin-bottom: 10px;">
                                                                    <span style="margin-right: 20px;">
                                                                        <img v-if="getQmImg(previewTableList.bxd.fzxsprid)" :src="getQmImg(previewTableList.bxd.fzxsprid)" alt="签名图片">
                                                                        <span v-else> {{ previewTableList.bxd.fzxspr }}</span>
                                                                    </span>
                                                                    {{ previewTableList.bxd.fzxspsj?previewTableList.bxd.fzxspsj.substr(5,2):'' }}
                                                                    <span class="Title">月</span>
                                                                    <span v-if="previewTableList.bxd.fzxspsj">
                                                                        {{ previewTableList.bxd.fzxspsj.substr(8,2) }}
                                                                    </span>
                                                                    <span v-else>&emsp;&emsp;</span>
                                                                    <span class="Title">日</span>
                                                                </p>
                                                            </div>
                                                            <div style="flex: 1;">
                                                                <p class="Title" style="text-align: left;padding-left: 5px;">部门负责人审核：</p>
                                                                <p style="min-height: 80px;">{{ previewTableList.bxd.fjbbmshyj }}</p>
                                                                <p style="text-align: right;padding-right: 20px;margin-bottom: 10px;">
                                                                    <span style="margin-right: 20px;">
                                                                        <img v-if="getQmImg(previewTableList.bxd.fjbbmshrid)" :src="getQmImg(previewTableList.bxd.fjbbmshrid)" alt="签名图片">
                                                                        <span v-else> {{ previewTableList.bxd.fjbbmshr }}</span>
                                                                    </span>
                                                                    {{ previewTableList.bxd.fjbbmshsj?previewTableList.bxd.fjbbmshsj.substr(5,2):' ' }}
                                                                    <span class="Title">月</span>
                                                                    <span v-if="previewTableList.bxd.fjbbmshsj">
                                                                        {{ previewTableList.bxd.fjbbmshsj.substr(8,2) }}
                                                                    </span>
                                                                    <span v-else>&emsp;&emsp;</span>
                                                                    <span class="Title">日</span>
                                                                </p>
                                                            </div>
                                                        </td>
                                                        </tr>
                                                    </table>
                                                    <div class="expenseApprovalForm-print-title-box" style="padding: 10px 150px;">
                                                        <span>
                                                            <span class="Title">会计:</span>
                                                            <img v-if="getQmImg(previewTableList.bxd.fzxsprid)" :src="getQmImg(previewTableList.bxd.fcwshrid)" alt="签名图片">
                                                            <span v-else> {{ previewTableList.bxd.fcwshr }}</span>
                                                        </span>
                                                        <span>
                                                            <span class="Title">出纳:</span>
                                                            <img v-if="getQmImg(previewTableList.bxd.fzxsprid)" :src="getQmImg(previewTableList.bxd.fcnshrid)" alt="签名图片">
                                                            <span v-else> {{ previewTableList.bxd.fcnshr }}</span>
                                                        </span>
                                                        <span>
                                                            <span class="Title">经办人:</span>
                                                            <img v-if="getQmImg(previewTableList.bxd.fzxsprid)" :src="getQmImg(previewTableList.bxd.fjbrid)" alt="签名图片">
                                                            <span v-else> {{ previewTableList.bxd.fjbr }}</span>
                                                        </span>
                                                    </div>
                                                    <div style="display: flex;padding-left: 10px;color: #5ca3e5;">
                                                        <div>说明：</div>
                                                        <div>
                                                        <span>1、外来原始凭证粘贴单和大张的外来原始凭证应分项汇总填写此单。</span><br/>
                                                        <span>2、审批程序：部门负责人→会计→单位领导批准。</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div style="color: #5ca3e5;writing-mode: vertical-rl;display: flex;justify-content: space-evenly;padding: 100px 4px 100px">
                                                    <!-- <span>附凭证</span>
                                                    <span>张</span> -->
                                                    <span><span v-if="!isFbxdzt" style="color: red;">* </span>附凭证</span>
                                                    <a-input v-if="!isFbxdzt" v-model="formState.fbxdj" @blur="saveClick(true)" style="width: 55px;height: 50px;border-color: red;"></a-input>
                                                    <span v-else style="font-size: 14px;color:black;">
                                                        {{ previewTableList.bxd?previewTableList.bxd.fbxdj:'' }}
                                                    </span>
                                                    <span>张</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="laborCostsList.length" style="margin-top: 60px;text-align: center;">
                                            <h2 style="font-weight: 600;">{{ previewTableList.bxd.fbxnrms }}</h2>
                                            <div style="display: flex;justify-content: space-between;padding: 0px 20px 10px;">
                                                <span>科室：<span>{{ this.formState.fjbks }}</span></span>
                                                <span>日期：<span>{{ this.formState.ftbrq }}</span></span>
                                            </div>
                                            <table border="1" cellspacing="0" style="width: 100%" class="laborCostsTable">
                                                <tr>
                                                    <th style="width: 60px;">序号</th>
                                                    <th>姓名<span style="color: red;">(必填正确)</span></th>
                                                    <th>身份证号<span style="color: red;">(必填正确)</span></th>
                                                    <th>单位</th>
                                                    <th style="width: 80px;">劳务费<br/>税前金额</th>
                                                    <th style="width: 80px;">个税</th>
                                                    <th>劳务费实发金额<br/><span style="color: red;">(必填正确)</span></th>
                                                    <th>银行卡号</th>
                                                </tr>
                                                <template v-for="(item,index) in laborCostsList">
                                                    <tr>
                                                        <td :key="index"> {{ index + 1 }} </td>
                                                        <td> {{ item.realname }} </td>
                                                        <td> {{ item.fsfzh }} </td>
                                                        <td> {{ item.fgzdw }} </td>
                                                        <td> {{ item.flwfsqje }} </td>
                                                        <td> {{ item.flwfgsje }} </td>
                                                        <td> {{ item.flwfsbje }} </td>
                                                        <td>
                                                            {{ item.fyhkh + '/' }}<br/>
                                                            {{ item.fkfh }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4">合 计</td>
                                                        <td></td>
                                                        <td></td>
                                                        <td>{{ item.fybbxje }}</td>
                                                        <td></td>
                                                    </tr>
                                                </template>
                                            </table>
                                            <div style="display: flex;padding-left: 10px;">
                                                <div style="white-space: nowrap;">说明：</div>
                                                <div style="text-align: left;">
                                                    <span>1、当劳务费小于800元，不缴个税，劳务费税前金额=实发金额。</span><br/>
                                                    <span>2、当劳务费大于800元且没超过4000元，劳务费税前金额=(劳务费实发金额-160)/0.8，个税=(劳务费税前金额-800元)*20%。</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="summaryActiveKey == '报销明细'" class="generalReimbursement-summary-1">
                                    <div class="preview-box">
                                        <div>
                                            <div class="table-hear">
                                                <h3>报销明细</h3>
                                            </div>
                                            <table class="generalReimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                                <tr style="background: #dee5ed !important;">
                                                    <th style="width: 70px;">姓&ensp;&ensp;名</th>
                                                    <th>部&ensp;&ensp;门</th>
                                                    <th>报销内容描述</th>
                                                    <th>报销项目分类</th>
                                                    <th>报销账户</th>
                                                    <th>开户行名称</th>
                                                    <th>实报合计费用</th>
                                                    <th style="width: 70px;">卡&ensp;&ensp;类</th>
                                                </tr>
                                                <tr v-if="previewTableList.bxmx.length" v-for="(item,index) in previewTableList.bxmx" :key="index" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                                                    <td>{{ item.realname }}</td>
                                                    <td>{{ item.fpjks }}</td>
                                                    <td>{{ item.fbxnrms }}</td>
                                                    <td>{{ item.fbxxmfl1 }}</td>
                                                    <td>{{ item.fyhkh }}</td>
                                                    <td>{{ item.fkhh }}</td>
                                                    <td>{{ item.fbzmx }}</td>
                                                    <td>{{ item.fkl }}</td>
                                                </tr>
                                                <tr v-if="previewTableList.bxmx.length == 0">
                                                    <td colspan="11">暂无数据</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div style="margin-top: 20px;">
                                            <div class="table-hear">
                                                <h3>指标名称</h3>
                                            </div>
                                            <table class="generalReimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                                <tr style="background: #dee5ed !important;">
                                                    <th>预算指标名称</th>
                                                    <th>科&ensp;&ensp;室</th>
                                                    <th>部门经济分类</th>
                                                    <!-- <th>已申请支付金额</th> -->
                                                    <th>总指标</th>
                                                    <th>指标结余</th>
                                                    <th>支出进度</th>
                                                </tr>
                                                <tr v-if="previewTableList.yszb.length" v-for="(item,index) in previewTableList.yszb" :key="index" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                                                    <td>{{ item.fysxmmc }}</td>
                                                    <td>{{ item.fbm }}</td>
                                                    <td>{{ item.fbmjjflmc }}</td>
                                                    <!-- <td>{{ item.fysqje }}</td> -->
                                                    <td>{{ item.fzzb }}</td>
                                                    <td>{{ item.fzbjy }}</td>
                                                    <td>{{ Number(item.fzcjd * 100).toFixed(2) + '%' }}</td>
                                                </tr>
                                                <tr v-if="previewTableList.yszb.length == 0">
                                                    <td colspan="6">暂无数据</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="summaryActiveKey == '事项申请'" class="generalReimbursement-summary-1">
                                    <div class="preview-box">
                                        <div>
                                            <div class="table-hear">
                                                <h3>事项申请</h3>
                                            </div>
                                            <table class="generalReimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                                <tr style="background: #dee5ed !important;">
                                                    <th>姓&ensp;&ensp;名</th>
                                                    <th>摘&ensp;&ensp;要</th>
                                                    <th>操&ensp;&ensp;作</th>
                                                </tr>
                                                <!-- <tr>
                                                    <td>{{ previewTableList.bxd.fjbr }}</td>
                                                    <td>{{ previewTableList.bxd.fbxnrms }}</td>
                                                    <td>
                                                        <a-button v-if="previewTableList.bxdflcbm == 'NK_JCXSWSQ'" class="blue-btn" @click="previewClick(previewTableList.sxsq)">预览</a-button>
                                                        <a-button v-else class="blue-btn" @click="previewClick(previewTableList.bxd)">预览</a-button>
                                                    </td>
                                                </tr>
                                                <tr v-if="previewTableList.sxsq.length == 0">
                                                    <td colspan="3">暂无数据</td>
                                                </tr> -->
                                                <tr v-if="previewTableList.sxsq.length" v-for="(item,index) in previewTableList.sxsq" :key="index" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                                                    <td>{{ item.fxm }}</td>
                                                    <td>{{ item.fsy }}</td>
                                                    <td>
                                                        <a-button v-if="previewTableList.bxd.flcbm == 'NK_JCXSWSQ'" class="blue-btn" @click="previewClicks(item)">预览</a-button>
                                                        <a-button v-else class="blue-btn" @click="previewClick(item)">预览</a-button>
                                                    </td>
                                                </tr>
                                                <tr v-if="previewTableList.sxsq.length == 0">
                                                    <td colspan="3">暂无数据</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;margin: 0 15px;margin-top: 5px;" v-if="!isView">
                        <a-button v-if="currentSteps !== 2" class="blue-btn" type="primary" style="margin-right: 10px;" icon="folder" @click="saveClick(true)">保存</a-button>
                        <a-button v-if="!isFbxdzt" type="primary" style="margin-right: 10px;" ghost icon="arrow-left" @click="saveClick(false,'上一步')">上一步</a-button>
                        <a-button v-if="currentSteps !== 2 " type="primary" style="margin-right: 10px;" ghost icon="arrow-right" @click="saveClick(false,'下一步')">下一步</a-button>
                        <a-button v-if="currentSteps == 2" class="blue-btn" type="primary" style="margin-right: 10px;" icon="folder" @click="totalPrintClick(true)">打包打印</a-button>
                        <a-button v-if="currentSteps == 2 && !isFbxdzt" class="blue-btn" type="primary" style="margin-right: 10px;" icon="check-circle" @click="saveClick(false,'下一步',true)">完成</a-button>
                    </div>
                </div>
            </div>
        </a-modal>
        <selectSqyjTable ref="selectSqyjTableRef" @getData="getData"/>
        <selectProjectBudgetIndicators ref="selectProjectBudgetIndicatorsRef" @getIndexHandle="getIndexHandle"/>
        <oaModal v-show="false" ref="oaModalRef" ></oaModal>
        <nkModal v-show="false" ref="nkModalRef" ></nkModal>
        <totalPrint ref="totalPrintRef" />
        <usualnessApplyFor v-show="false" ref="usualnessApplyForRef"/>
    </div>
</template>
<script>
import {
    initSqsxFybxd,
    returnFybxdYbbx,
    submitFybxdYbbx,
    zzrybxdupdateBxd,
    queryBxryxxListBySqsxId,
    zzrybxdgetZzryBd,
    zzrybxdgetYlsj,
    updateBxrymxxx,
    downMyQm,
    initBzFlow,
    initSqsxFybxds,
    ybbxsc,
    queryBxryxxListByDjh,
    getybbxbt,
} from './service/index'
import selectSqyjTable from '../reimbursement/selectSqyjTable'
import selectProjectBudgetIndicators from '../reimbursement/selectProjectBudgetIndicators'
import totalPrint from '../reimbursement/totalPrint.vue'
import usualnessApplyFor from '../reimbursement/usualnessApplyFor'
import compSelector from '@/components/compSelector/compSelector'
import {typeSelect,} from '@/components/compSearchCriteria/ContractType'
export default {
    components:{
        selectSqyjTable,
        selectProjectBudgetIndicators,
        oaModal: () => import('@/views/administrativeOffice-new/yiBan/index'),
        nkModal: () => import('@/views/internalControl/yiBan/index'),
        totalPrint,
        compSelector,
        usualnessApplyFor,
    },
    data() {
        return {
            visible: false,
            currentSteps:0,
            fbxdztList:['报销信息填写','用款计划申请','汇总表单'],
            cform:this.$form.createForm(this, { name: 'cform' }),
            formState: {},
            tableKey: '',
            currentSteps2Table: [],
            previewTableList: [],
            reimbursementType: '',
            isFbxdzt:false,
            isView:false,
            formKey: '',
            summaryActiveKey:'汇总表单',
            allTableKey: '',
            laborCostsBox: false,
            laborCostsList: [],
            typeSelect:typeSelect,
            compSelectorkey:null,
            isYbbxbt: false,
            ybbxbtData: {}
        }
    },
    methods: {
        getData(val){
            if(val.heightType){
                this.latestData(val)
                return
            }
            if(val.modalTitle){
                this.reimbursementType = val.modalTitle
            }
            // initSqsxFybxd({bxlx: '一般报销',sfdgzz:val.modalTitle=='对公报销'?'是':'否',bxdlx:val.modalTitle=='对公报销'?'对公转账申请单':'支出报销单'}).then(res => {
            initSqsxFybxd({bxlx: '一般报销',sfdgzz: '',bxdlx: ''}).then(res => {
                this.currentSteps = this.fbxdztList.indexOf(res.result.records.fbxdzt=='完成'?'汇总表单':res.result.records.fbxdzt)
                //console.log('pppppppppp',this.currentSteps)
                if(res.success){
                    this.isFbxdzt = res.result.records.fbxdzt=='完成' || val.view?true:false
                    this.formState = {
                        ...res.result.records,
                        fbxdid: res.result.records.id
                    }
                    if(this.currentSteps !== 0){
                        this.latestData({fpid: this.formState.fsqsxid,flcmb: this.formState.flcbm})
                    }
                } else {
                    this.$message.warning(res.message,10)
                    this.visible = false
                }
            })
        },
        latestData(row){
            // queryBxryxxListBySqsxId({sqsxid:row.fpid,lcbm: row.flcmb,bxdlx:this.reimbursementType=='对公报销'?'对公转账申请单':'支出报销单'}).then(res => {
            queryBxryxxListBySqsxId({sqsxid:row.fpid,lcbm: row.flcmb,bxdlx:''}).then(res => {
                this.currentSteps = this.fbxdztList.indexOf(res.result.bxd.fbxdzt=='完成'?'汇总表单':res.result.bxd.fbxdzt)
                //console.log('pppppppppp',this.currentSteps)
                this.isFbxdzt = res.result.bxd.fbxdzt=='完成' || row.view?true:false
                this.formState = {
                    ...res.result.bxd,
                    fbxdid: res.result.bxd.id
                }
                if(res.result.ysxmList){
                    this.currentSteps2Table = []
                    this.currentSteps2Table.push(res.result.ysxmList)
                }
                //console.log('sssssssss',this.currentSteps2Table)
                this.formKey = Date.now()
                this.tableKey = Date.now()
                if(res.result.bxd && res.result.bxd.id && res.result.ysxmList.id){
                    this.laborCostsBox = false
                    this.getAllData()
                }
            })
        },
        getqueryBxryxxListByDjh(val){
            queryBxryxxListByDjh(val).then(res => {
                if(res.success){
                    this.formState = {
                        ...res.result.bxd,
                        fbxdid: res.result.bxd.id
                    }
                }
            })
        },
        getApplicationData(data){
            initSqsxFybxds(data).then(res => {
                this.currentSteps = this.fbxdztList.indexOf(res.result.records.fbxdzt=='完成'?'汇总表单':res.result.records.fbxdzt)
                //console.log('pppppppppp',this.currentSteps)
                if(res.success){
                    this.isFbxdzt = res.result.records.fbxdzt=='完成' || data.view?true:false
                    this.formState = {
                        ...res.result.records,
                        fbxdid: res.result.records.id
                    }
                    if(this.currentSteps !== 0){
                        this.latestData({fpid: this.formState.fsqsxid,flcmb: this.formState.flcbm})
                    }
                } else {
                    this.$message.warning(res.message,10)
                    this.visible = false
                }
            })
        },
        // 汇总表单
        getAllData(){
            //console.log('汇总表单,我进来了',this.formState)
            zzrybxdgetZzryBd({bxdid: this.formState.fbxdid}).then(res => {
                //console.log('结果？？？',res)
                this.formState = {
                    ...res.result.records.bxd,
                    fbxdid: res.result.records.bxd.id
                }
                this.previewTableList = []
                this.laborCostsList = []
                this.previewTableList = res.result.records
                this.allTableKey = Date.now()
                let item = res.result.records.bxdgr
                if(this.currentSteps2Table[0].fbmjjflmc == '劳务费'){
                    item.forEach(item => {
                        if(Number(item.fybbxje) >= 800){
                            this.laborCostsList.push(item)
                        }
                    })
                    if(this.laborCostsList.length > 0){
                        this.laborCostsBox = true
                    }
                }

            })
        },
        getupdateBxrymxxx(item){
            //console.log(item)
            let data = {
                ...item,
                sqsxid:this.formState.fsqsxid,
                fbxdid:this.formState.fbxdid
            }
            //console.log(data)
            updateBxrymxxx(data).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                }
            })
        },
        //汇总
        summaryActiveChange(val){
            //console.log(val)
        },
        currentStepChange(val){
            //console.log(val)
        },
        // 选择申请依据
        fsqyjChange(){
            this.saveClick(false)
            this.$refs.selectSqyjTableRef.visible = true
            this.$refs.selectSqyjTableRef.getData({bxdid:this.formState.fbxdid},'一般报销')
        },
        // 清空申请依据
        fsqyjDelete(){
            let that = this
            that.$confirm({
                title: '您确定要清空申请依据吗?',
                onOk() {
                    let data = {
                        bxdid: that.formState.fbxdid,
                        // fsqsxid: that.formState.fsqsxid,
                    }
                    ybbxsc(data).then(res => {
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.getqueryBxryxxListByDjh({djh: that.formState.fdjh,flcbm: that.formState.flcbm,sqsxid:''})
                        } else {
                            that.$message.warning(res.message)
                        }
                    })
                },
            });
        },
        // 选择项目预算指标
        indexHandleClick(){
            this.$refs.selectProjectBudgetIndicatorsRef.visible = true
        },
        // 获取项目预算指标
        async getIndexHandle(item,value){

            //console.log('传值',item,value)
            if(item[0].fbmjjflmc == '劳务费'){
                // this.laborCostsBox = true
                this.laborCostsList.push({
                    realname: '',
                    fsfzh: '',
                    phone: '',
                    fgzdw: '',
                    fkfh: '',
                    fyhkh: '',
                    flwfsbje: '',
                    flwfgsje: '',
                    flwfsqje: '',
                })
            } else {
                this.laborCostsBox = false
            }
            this.currentSteps2Table = []
            this.currentSteps2Table = item
            this.formState.fysxmid = value.join(','),
            this.tableKey = Date.now()

            let data = {
                ...this.formState,
                id:this.formState.fbxdid,
                fbxdlx: item[0].fbmjjflmc == '劳务费'?'支出报销单':'对公转账申请单',
                fsfdgzz: item[0].fbmjjflmc == '劳务费'?'是':'否'
            }
            await zzrybxdupdateBxd(data)
            this.getAllData()
        },
        blurClick(val){
            let data = {
                ...val,
                id:this.formState.fbxdid,
            }
            zzrybxdupdateBxd(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }
            })
        },
        saveClick(val,ztVal,fqVal){
            let data = {
                ...this.formState,
                id:this.formState.fbxdid,
            }
            if(this.currentSteps == 2 && ztVal == '下一步'){
                this.messaageSaveClick(data)
                return
            }
            zzrybxdupdateBxd(data).then(res=>{
                if(res.code == 200){
                    if(val){
                        this.$message.success(res.message)
                    }
                    if(ztVal == '下一步'){
                        this.nextStepClick(fqVal)
                    }else if(ztVal == '上一步'){
                        this.backStepClick()
                    }else{
                        this.latestData({fpid: this.formState.fsqsxid,flcmb: this.formState.flcbm})
                    }
                    //console.log('99999999999',this.laborCostsBox,this.formState)
                    if(this.laborCostsBox){
                        this.laborCostsList.forEach(item => {
                            //console.log(item)
                            this.getupdateBxrymxxx(item)
                        })
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
                // 完成前提示
                messaageSaveClick(data){
            var that = this
            that.$confirm({
                title: '点击完成按钮后，所形成的表单数据将不可更改，您确认要继续提交吗?',
                onOk() {
                    zzrybxdupdateBxd(data).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.nextStepClick(true)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
        nextStepClick(val){
            submitFybxdYbbx({fbxdid:this.formState.fbxdid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.latestData({fpid: this.formState.fsqsxid,flcmb: this.formState.flcbm})

                    if(val){
                        this.getybbxbtFuntion()
                        this.InitiateProcess()
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        backStepClick(){
            returnFybxdYbbx({fbxdid:this.formState.fbxdid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.latestData({fpid: this.formState.fsqsxid,flcmb: this.formState.flcbm})
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        getybbxbtFuntion(){
            let data = {
                yszbid: this.formState.fysxmid,
                bxdid: this.formState.fbxdid,
            }
            getybbxbt(data).then(res => {
                if(res.success){
                    this.isYbbxbt = true
                    this.ybbxbtData = res.result
                }
            })
        },
        InitiateProcess(){
            initBzFlow({fsffqlc:'是',id:this.formState.fbxdid}).then(res => {})
        },
        previewClick(val){
            //console.log(val)
            let data = {
                bxdid: this.formState.fbxdid,
                sqsxid: val.id
            }
            zzrybxdgetYlsj(data).then(res => {
                if(res.success){
                    if(res.result.records.flcmb == 'NK_HTSPLC'){
                        this.$refs.nkModalRef.reviseClick(res.result.records)
                        return
                    }
                    //console.log(this.$refs.oaModalRef)
                    this.$refs.oaModalRef.reviseClick(res.result.records)
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        previewClicks(val){
            this.$refs.usualnessApplyForRef.usualnessApplyForView(val)
        },
        // 签名图片
        getQmImg(ids){
            downMyQm({id:ids}).then(resa => {
                if(resa.code){
                    return false
                } else {
                    return "data:image/png;base64," +
                    btoa( new Uint8Array(resa).reduce( (data, byte) => data + String.fromCharCode(byte), "" ))
                }
            })
        },
        totalPrintClick(){//打包打印
            this.$refs.totalPrintRef.getData(this.formState,this.previewTableList,[],{})
            this.$refs.totalPrintRef.visible = true
        },
    },
}
</script>
<style lang="less">
.generalReimbursement-handle-modal {
    .ant-steps-item-title{
        font-weight: 600 !important;
        font-size: 18px;
    }
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
        background-color: #fff;
    }
    .ant-modal-body {
        flex: 1;
        padding: 12px;
        position: relative;
        background-color: #fff;
        height: calc(100vh - 108px);
    }
}
.generalReimbursement-content-box-v{
    .ant-steps-item-content {
        width: 126px;
    }
    .ant-steps-item-title{
        font-weight: 600 !important;
        font-size: 16px;
    }
    .generalReimbursement-model-form-box {
        padding: 0 15px;
        margin-top: 20px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
              margin-bottom: 0 !important;
            }
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 120px !important;//确保左侧固定文字不会换行
            justify-content: center;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }
    }
    .generalReimbursement-infoArea-box{
        .special-content-radio{
            height: calc(100vh - 225px);
            display: flex;
            align-items: center;
            // justify-content: center;
            flex-direction: column;
            margin-top: 30px;
            .ant-radio-wrapper{
                font-size: 18px;
            }
            .ant-radio-inner{
                width: 20px;
                height: 20px;
            }
            .ant-radio-inner::after{
                width: 12px;
                height: 12px;
            }
            .special-item-btn-v{
                margin-left: 365px;
                margin-top: 15px;
                text-align: center;
            }
        }
        .fjcts-content-box{
            text-align: center;
            margin: 10px 0;
            display: flex;
            justify-content: center;
            .fjcts-content-v{
                width: 80%;
                padding:10px 0;
                border: 1px solid #d9d9d9;
            }
            .fjcts-content-text{
                display: inline-block;
                width: 305px;
                text-align: right;
                font-size: 16px;
                font-weight: 600;
            }
            .fjcts-content-right{
                display: inline-block;
                width: 230px;
                text-align: left;
            }
        }
        .currentSteps2-table {
            width: 100%;
            table-layout: fixed;
            font-size: 18px;
            text-align: center;
            border: 1px solid #d9d9d9;
            th {
                padding: 5px;
                background: #dee5ed !important;
                color: #000 !important;
            }
            td {
                padding: 5px;
                min-height: 40px !important;
                font-size: 16px;
            }
        }
    }
    .generalReimbursement-serviceFee-table{
        th{
            text-align: center;
            font-size: 16px;
            padding: 3px 5px;
        }
        td{
            text-align: center;
            padding: 3px 5px;
            height: 40px;
            font-size: 16px;
        }
        .serviceFee-icon-text-td{
            width: 120px;
        }
        .serviceFee-icon-text{
            display: flex;
            align-items: center;
            padding: 0 5px;
            .serviceFee-icon{
                color: #5ca3e5;
            }
            span{
                text-align: center;
                flex: 1;
            }
        }

    }
    .generalReimbursement-transportation-table{
        th{
            text-align: center;
            font-size: 16px;
            padding: 3px 5px;
        }
        td{
            text-align: center;
            padding: 3px 5px;
            height: 40px;
            font-size: 16px;
        }
        .special-table-lable-td{
            background-color: #e6f7ff;
            width: 160px !important
        }
    }
    .generalReimbursement-summary-table-5{
        .tabs-card-edit-box{
            margin: 5px 15px 0 15px;
            .ant-tabs-bar{
                // border: 0 !important;
                border-color: #38f !important;
                margin: 0 !important;
            }
            .ant-tabs-tab{
                background: #edeff3 !important;
                font-size: 14px !important;
                margin-left: 1px !important;
                height: 30px !important;
                line-height: 30px !important;

            }
            .ant-tabs-tab-active{
                margin: 0 !important;
                margin-left: 0 !important;
                margin-right: 1px !important;
                background-color: #38f !important;
                color: #fff !important;
                height: 32px !important;
                border: 1px solid #38f !important;
                border-bottom: 0 !important;
                padding:0 15px !important;

            }
            .ant-tabs-nav-container{
                height: 32px !important;
            }
        }
        .tab-box-v1{
            border: 1px solid #38f;
            border-top: 0;
            margin: 0 15px;
            // height: calc((100vh - 260px) / 2 );
        }

        .tabs-card-edit-box2{
            .ant-tabs-tab{
                // margin-right: 5px !important;
                border-bottom-left-radius: 10px !important;
                border-bottom-right-radius: 10px !important;
            }
        }
        .tabs-card-edit-box3{
            .ant-tabs-tab-active{
                background-color: #fff !important;
                color: #38f !important;
            }
        }
        .tabs-card-edit-box4{
            .ant-tabs-tab{
                // margin-right: 5px !important;
                border-top-left-radius: 10px !important;
                border-top-right-radius: 10px !important;
            }
            .ant-tabs-tab-active{
                background-color: #fff !important;
                color: #38f !important;
            }
        }
    }

    //汇总表
    .generalReimbursement-summary-1{
        width: 100%;
        padding: 10px 15px;
        .table-hear{
            display: flex;
            font-weight: 600;
            flex-direction: column;
            h3{
                font-weight: 600;
                font-size: 22px;
                text-align: center;
            }
            span{
                display: inline-block;
                width: calc(100% - 8px);
                text-align: right;
                padding-right: 8px;
            }
        }
        .serviceFee-icon-text-td{
            width: 120px;
        }
        .serviceFee-icon-text{
            display: flex;
            align-items: center;
            padding: 0 5px;
            .serviceFee-icon{
                color: #5ca3e5;
            }
            span{
                text-align: center;
                flex: 1;
            }
        }
        .preview-box {
            width: 70%;
            margin: 0 auto;
        }
    }
    .travelReimbursementForm-print-box {
        font-size: 14px;
        font-family: 宋体;
        color: black;
        h1 {
            text-decoration: underline;
            text-align: center;
            color: #5ca3e5;
        }
        .travelReimbursementForm-table {
            width: 100%;
            text-align: center;
            table-layout: fixed;
            td {
            // min-width: 10px;
            padding: 0 !important;
            }
        }
        table {
            border-color: #5ca3e5;
            border-top: 2px solid #5ca3e5;
            border-left: 2px solid #5ca3e5;
            border-right: 2px solid #5ca3e5;
            border-bottom: 2px solid #5ca3e5;
        }
        h1 {
            color: #5ca3e5;
            font-weight: bold;
            letter-spacing: 4px;
            // font-size: 35px;
        }
        .Title {
            color: #5ca3e5;
            // font-weight: bold;
            text-align: center;
        }
        .letterSpan {
            // letter-spacing: 8px;
        }
        .td-rowspan {
            width: 1px !important;
            min-width: 1px !important;
            padding: 1px 0;
        }
        .travelReimbursementForm-print-title-box {
            display: flex;
            justify-content: space-between;
        }
    }
    .applicationForTransferForm-print-box {
        font-size: 18px;
        font-family: 宋体;
        color: black;
        h1 {
            text-align: center;
        }
        .applicationForTransferForm-table {
            width: 100%;
            text-align: center;
            // table-layout: fixed;
            th {
            padding: 10px 5px !important;
            }
            td {
            min-width: 10px;
            padding: 5px !important;
            }
        }
        table {}
        h1 {
            font-weight: bold;
            letter-spacing: 4px;
            // font-size: 35px;
        }
        .Title {
            color: #5ca3e5;
            // font-weight: bold;
            text-align: center;
        }
        .letterSpan {
            // letter-spacing: 8px;
        }
        .td-rowspan {
            width: 1px !important;
            min-width: 1px !important;
            padding: 1px 0;
        }
    }
    .expenseApprovalForm-print-box {
        font-size: 18px;
        font-family: 宋体;
        color: black;
        h1 {
            text-decoration: underline;
            text-align: center;
            color: #5ca3e5;
        }
        .expenseApprovalForm-table {
            width: 100%;
            text-align: center;
            table-layout: fixed;
            td {
            min-width: 10px;
            padding: 10px 5px !important;
            }
        }
        table {
            border-color: #5ca3e5;
            border-top: 2px solid #5ca3e5;
            border-left: 2px solid #5ca3e5;
            border-right: 2px solid #5ca3e5;
            border-bottom: 2px solid #5ca3e5;
        }
        h1 {
            color: #5ca3e5;
            font-weight: bold;
            letter-spacing: 4px;
            // font-size: 35px;
        }
        .Title {
            color: #5ca3e5;
            // font-weight: bold;
            text-align: center;
        }
        .letterSpan {
            // letter-spacing: 8px;
        }
        .td-rowspan {
            width: 1px !important;
            min-width: 1px !important;
            padding: 1px 0;
        }
        .expenseApprovalForm-print-title-box {
            display: flex;
            justify-content: space-between;
        }
    }

    .laborCostsTable {
        width: 70%;
        margin: 0 auto;
        th {
            text-align: center;
            padding: 5px 0;
            font-size: 16px;
        }
        td {
            text-align: center;
            padding: 5px 0;
        }
        .comp-select-box-b{
            .ant-select {
                width: 320px !important;
            }
            .ant-checkbox-group-item {
                width: 100% !important;
                // margin: 10px;
            }
        }
    }
}
</style>
